<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>jQuery商城商品图片展示下单</title>

    <link rel="stylesheet" href="css/shouye.css">

    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/modernizr-custom-v2.7.1.min.js"></script>
    <script>
        $(document).ready(function () {
            var $miaobian = $('.Xcontent08>div');
            var $huantu = $('.Xcontent06>img');
            var $miaobian1 = $('.Xcontent26>div');
            $miaobian.mousemove(function () {
                miaobian(this);
            });
            $miaobian1.click(function () {
                miaobian1(this);
            });

            function miaobian(thisMb) {
                for (var i = 0; i < $miaobian.length; i++) {
                    $miaobian[i].style.borderColor = '#dedede';
                }
                thisMb.style.borderColor = '#cd2426';

                $huantu[0].src = thisMb.children[0].src;
            }

            function miaobian1(thisMb1) {
                for (var i = 0; i < $miaobian1.length; i++) {
                    $miaobian1[i].style.borderColor = '#dedede';
                }
//		thisMb.style.borderColor = '#cd2426';
                $miaobian.css('border-color', '#dedede');
                thisMb1.style.borderColor = '#cd2426';
                $huantu[0].src = thisMb1.children[0].src;
            }

            $(".Xcontent33").click(function () {
                var value = parseInt($('.input').val()) + 1;
                $('.input').val(value);
            })

            $(".Xcontent32").click(function () {
                var num = $(".input").val()
                if (num > 0) {
                    $(".input").val(num - 1);
                }

            })

        })
    </script>

</head>

<style>
    .tab1 {
        height: 39px;
        padding-left: 10px;
        margin: 15px 0 10px;
        background: url("https://static.websiteonline.cn/website/plugin/tb_product_detail/styles/default/images/bg-tab1.png") repeat-x 0 100%;
    }

    .tab1 li {
        overflow: hidden;
        float: left;
        margin: 0 1px -1px 0;
        line-height: 40px;
        font-size: 14px;
        font-family: "SimSun";
        text-align: center;
    }

    .id-goods-info {
        font-family: 'Microsoft YaHei';
        color: #ce1e43;
        font-weight: bold;
    }

    .tab1 li a {
        display: block;
        width: 134px;
        height: 39px;
        background: url("https://static.websiteonline.cn/website/plugin/tb_product_detail/styles/default/images/bg-tab1-off.png") no-repeat 0 0;
    }

    .prod-head {
        border-top: 2px solid #B0B0B0;
        background: url("https://static.websiteonline.cn/website/plugin/tb_product_detail/styles/default/images/bg-h2.png") repeat-x 0 0;
        color: #333;
        padding: 10px;
    }

    .prod-head .itemname {
        margin-right: 30px;
        font-size: 18px;
        font-weight: 600;
        font-family: "SimSun";
    }

    .goods-detail {
        clear: both;
        padding: 5px;
        border: 1px solid #CCC;
        overflow: hidden;
        margin: auto;
    }
</style>


<body>
<script src="/demos/googlegg.js"></script>

<div class="Xcontent">
    <ul class="Xcontent01" style="height: 530px">
        <div class="Xcontent06"><img :src="item.url"  style="width: 600px;height: 400px;"></div>

        <ol class="Xcontent13">
            <div class="Xcontent14"><a href="#"><p>{{item.name}}</p></a></div>
            <div class="Xcontent15"><img src="images/shangpinxiangqing/X11.png"></div>
            <div class="Xcontent16"><p>充电5分钟，温暖2小时</p></div>
            <div class="Xcontent17">
                <p class="Xcontent18">售价</p>
                <p class="Xcontent19">￥<span>{{item.price}}</span></p>
                <div class="Xcontent20">
                    <p class="Xcontent21">促销</p>
                    <img src="images/shangpinxiangqing/X12.png">
                    <p class="Xcontent22">领610元新年礼券，满再赠好礼</p>
                </div>
                <div class="Xcontent23">
                    <p class="Xcontent24">服务</p>
                    <p class="Xcontent25">30天无忧退货&nbsp;&nbsp;&nbsp;&nbsp; 48小时快速退款 &nbsp;&nbsp;&nbsp;&nbsp; 满88元免邮</p>
                </div>

            </div>
            <!--            <div class="Xcontent26">-->
            <!--                <p class="Xcontent27">颜色</p>-->
            <!--                <div class="Xcontent28"><img src="images/shangpinxiangqing/X14.png"></div>-->
            <!--                <div class="Xcontent29"><img src="images/shangpinxiangqing/X1.png"></div>-->
            <!--            </div>-->
            <div class="Xcontent30">
                <p class="Xcontent31">斤数</p>
                <div class="Xcontent32"><img src="images/shangpinxiangqing/X15.png"></div>
                <form><input class="input" v-model="CarAddNewDTO.weight"></form>
                <div class="Xcontent33"><img src="images/shangpinxiangqing/16.png"></div>
            </div>
            <div class="Xcontent34"><a href="#"><img src="images/shangpinxiangqing/X17.png"></a></div>
            <div class="Xcontent35"><a href="javascript:void(0)" @click="addCar()"><img
                    src="images/shangpinxiangqing/X18.png"></a></div>
        </ol>
    </ul>
    <div>
        <ul class="tab1">
            <li style="position: relative;left: 100px">
                <a class="id-goods-info goods_info_txt cur" href="javascript:void(0)" @click="xxx1">
                    顾客评论
                </a>
            </li>
            <li style="position: relative;left: 100px">
                <a class="id-goods-info goods_info_txt cur" href="javascript:void(0)" @click="xxx2">
                    商品信息
                </a>
            </li>
        </ul>
        <div class="prod-head" id="comment" style="display: block">
            <span class="itemname">顾客评论</span>
            <div v-if="commentArr.length == 0" style="margin-top: 20px">
                <p>该商品暂无评论信息</p>
            </div>
            <div v-for="comment in commentArr" v-if="commentArr.length != 0" style="margin-top: 20px">
                <p>{{comment.nickname}}说:{{comment.content}}</p>
                <p>{{comment.created}}</p>
            </div>

        </div>

        <div class="goods-detail" id="detail" style="display: none">


            <div class="h4 goods_info_desc_txt">商品描述</div>
            <div class="wp-products-detail-desc">
                <div class="desc">美国进口、超大多汁、脆甜爽口
                    <hr>
                </div>
                <div class="detail">规格：500g<br>
                    产地：辽宁XX<br>
                    储存方式：冷藏保存<br>
                    口感：脆嫰紧实，清甜多汁<br>
                    营养：铁、花青素、维生素C、钙、磷等<br>
                    <br>
                    有大个：单果8-12g，每颗美早樱桃8-12g，是樱桃中的大个子。<br>
                    有姿色：绿柄心形果；果柄的新鲜青绿搭配爱心果实的艳丽深红，怎会俗气？<br>
                    有好味：清新甜滋味；紧脆多汁，自然清甜。<br>
                    有内涵：营养钻石果；樱桃富含花青素、铁及多种营养素，被誉为“水果中的钻石”。
                </div>
            </div>
        </div>
    </div>

</div>


</body>


<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: "body>div",
        data: {
            item: "",
            commentArr: "",
            userIdArr: "",
            show: "",
            CarAddNewDTO: {
                itemId: '',
                weight: '1',
            },

        },
        methods: {
            //添加商品到购物车
            addCar() {
                if(this.CarAddNewDTO.weight == null || this.CarAddNewDTO.weight == '' || this.CarAddNewDTO.weight == 0){
                    alert("请填写你需要的斤数");
                }else {
                //获取商品id
                let itemId = location.search.split('=')[1];
                this.CarAddNewDTO.itemId = itemId;
                axios
                    .create({'headers': {'Authorization': localStorage.getItem("jwt")}})
                    .post("/car/add-new", this.CarAddNewDTO).then(function (response) {
                    let responseBody = response.data;
                    if (responseBody.state != 20000) {
                        this.$message.error(responseBody.message);
                    } else {
                        alert("已成功添加到购物车..");
                        location.href = '/car.html';
                    }
                });
                }
            },
            xxx1() {
                if (document.getElementById("comment").style.display == "none") {
                    document.getElementById("comment").style.display = "block";
                    document.getElementById("detail").style.display = "none";
                }
            },
            xxx2() {
                if (document.getElementById("detail").style.display == "none") {
                    document.getElementById("detail").style.display = "block";
                    document.getElementById("comment").style.display = "none";
                }
            },
            //根据商品id获取商品详情
            getStandardById() {
                axios
                    .create({'headers': {'Authorization': localStorage.getItem("jwt")}})
                    .get("/item/getStandardById" + location.search).then(function (response) {
                    let responseBody = response.data;
                    v.item = responseBody.data;
                })
            },
            //根据商品id获取评论列表
            comments(itemId) {
                axios
                    .create({'headers': {'Authorization': localStorage.getItem("jwt")}})
                    .get("/comments?itemId=" + itemId).then(function (response) {
                    let responseBody = response.data;
                    v.commentArr = responseBody.data;
                })
            },

        },
        created: function () {

            console.log(location.search)
            let itemId = location.search.split('=')[1];
            this.getStandardById();
            this.comments(itemId);

        }
    })
</script>

</html>

